<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">网络统计</text></view>
				</template>
				<my-grid :list="list1" :col="2" type="lr" imgWidth="80%"></my-grid>
				<my-grid :list="list2.slice(0,3)" :col="3" decimals="2" class="m-t-5" imgWidth="25%"></my-grid>
				<my-grid :list="list2.slice(3,5)" :col="2" decimals="2" class="m-t-5" type="lr"
					imgWidth="80%"></my-grid>
				<my-grid :list="list2.slice(5)" :col="3" decimals="2" class="m-t-5" imgWidth="25%"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title">
						<text class="title-txt">交换机统计</text>
					</view>
				</template>

				<view class="p-y-15 p-x-10 b-r-4 flex m-between s-center" style="background: rgb(245, 247, 254);"
					@click="detailFn">
					<view class="flex s-end f-s-18 fw">
						交换机总数
						<up-count-to bold class="m-l-20" :endVal="list3[0].value" color="#0052D9" />
						<text class="f-s-14">台</text>
					</view>
					<up-icon label="详情" name="arrow-rightward" labelPos='left' color="#2172FC" labelColor="#2172FC" />
				</view>
				<my-grid :list="list3.slice(1,4)" :col="3" class="m-t-5"></my-grid>
				<my-grid :list="list3.slice(4)" :col="2" class="m-t-5"></my-grid>
				<my-grid :list="list4" :col="3" class="m-t-10" imgWidth="50%"></my-grid>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	import {
		getByApiCode,
	} from "@/api/customApi";

	const collapse = ref(null),
		showMoreKeys = ref([1]);
	/************************************************** 交换机统计 *************************************/
	const list1 = ref([{
			img: 'txwl/1.png',
			title: "5G基站数",
			value: 0
		}, {
			img: 'txwl/6.png',
			title: "WI-FI热点数",
			value: 0
		}]),
		list2 = ref([{
			img: 'txwl/8.png',
			title: "覆盖率",
			value: 0,
		}, {
			img: 'txwl/10.png',
			title: "平均RSRP",
			value: 0
		}, {
			img: 'txwl/9.png',
			title: "平均SINR",
			value: 0
		}, {
			img: 'txwl/13.png',
			title: "下载速率平均值",
			value: 0
		}, {
			img: 'txwl/12.png',
			title: "上传速率平均值",
			value: 0
		}, {
			img: 'txwl/4.png',
			title: "SA切换成功率",
			value: 0
		}, {
			img: 'txwl/3.png',
			title: "SA掉线率",
			value: 0
		}, {
			img: 'txwl/2.png',
			title: "5G时长驻留比",
			value: 0
		}])

	function fn1() {
		getByApiCode({
			apiCode: "deviceStatistics",
			propertyMapping: {
				key: "name",
				val: "value"
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list1.value.forEach(item => {
				item.value = data[item.title]
			})
		})
		getByApiCode({
			apiCode: "tongxinwangluo5gzhibiao",
			propertyMapping: {
				key: "name",
				val: "val"
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list2.value.forEach(item => {
				item.value = data[item.title]
			})
		})
	}
	/************************************************** 5G设备统计 *************************************/
	const list3 = ref([{
			title: '交换机总数',
			value: '27',
			unit: '台'
		}, {
			title: '环网交换机',
			value: '15',
			unit: '台'
		}, {
			title: '办公网交换机',
			value: '2',
			unit: '台'
		}, {
			title: '视频网交换机',
			value: '3',
			unit: '台'
		}, {
			title: '核心交换机',
			value: '6',
			unit: '台'
		}, {
			title: '接入网交换机',
			value: '1',
			unit: '台'
		}]),
		list4 = ref([{
			img: 'txwl/11.png',
			title: '其他网络设备',
			value: '14',
			unit: '台'
		}, {
			img: 'txwl/7.png',
			title: '防火墙',
			value: '3',
			unit: '台'
		}, {
			img: 'txwl/5.png',
			title: 'WAC',
			value: '3',
			unit: '台'
		}])

	function fn2() {
		getByApiCode({
			apiCode: "jiaohuanjitongjibiao",
			propertyMapping: {
				key: "s",
				val: "y"
			},
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list3.value.forEach((item, i) => {
				item.value = data[item.title]
			})
		})
		getByApiCode({
			apiCode: "chujiaohuanjiqita",
			propertyMapping: {
				key: "key",
				val: "value"
			},
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list4.value.forEach((item, i) => {
				item.value = data[item.title]
			})
		})
	}
	/*****************************************交换机详情*****************************************/
	function detailFn() {
		uni.navigateTo({
			url: "/pages/application/xxjc/network/detail"
		})
	}

	function getServerData(refresh) {
		Promise.all([
			fn1(),
			fn2()
		]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
			setTimeout(() => {
				collapse.value.init()
			}, 400)
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style scoped lang="scss">
</style>